<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body text-center px-5">
    @if ('Active' in service.values) {
    <div
      class="btn-group-vertical d-flex justify-content-center mb-4 p-0"
      role="group"
      [attr.aria-label]="'accessories.control.mode_control' | translate"
    >
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setActive(0, $event)">
        <div class="float-start primary-text">
          <i
            class="fas fa-xl"
            [ngClass]="{ 'fa-check-circle': service.values.Active === 0, 'fa-blank': service.values.Active !== 0 }"
          ></i>
        </div>
        {{ 'accessories.control.off' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setActive(1, $event)">
        <div class="float-start primary-text">
          <i
            class="fas fa-xl"
            [ngClass]="{ 'fa-check-circle': service.values.Active === 1, 'fa-blank': service.values.Active !== 1 }"
          ></i>
        </div>
        {{ 'accessories.control.on' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
    </div>
    } @else if ('TargetMediaState' in service.values) {
    <div
      class="btn-group-vertical d-flex justify-content-center mb-4 p-0"
      role="group"
      [attr.aria-label]="'accessories.control.media_control' | translate"
    >
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetState(0, $event)">
        <div class="float-start primary-text">
          <i
            class="fas fa-xl"
            [ngClass]="{ 'fa-check-circle': service.values.CurrentMediaState === 0, 'fa-blank': service.values.CurrentMediaState !== 0 }"
          ></i>
        </div>
        {{ 'accessories.control.play' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetState(1, $event)">
        <div class="float-start primary-text">
          <i
            class="fas fa-xl"
            [ngClass]="{ 'fa-check-circle': service.values.CurrentMediaState === 1, 'fa-blank': service.values.CurrentMediaState !== 1 }"
          ></i>
        </div>
        {{ 'accessories.control.pause' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetState(2, $event)">
        <div class="float-start primary-text">
          <i
            class="fas fa-xl"
            [ngClass]="{ 'fa-check-circle': service.values.CurrentMediaState === 2, 'fa-blank': service.values.CurrentMediaState !== 2 }"
          ></i>
        </div>
        {{ 'accessories.control.stop' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
    </div>
    } @if ('Mute' in service.values) {
    <h6>
      {{ ('Active' in service.values || 'TargetMediaState' in service.values ? 'accessories.control.speaker_volume' :
      'menu.label_status') | translate }}
    </h6>
    <div
      class="btn-group-vertical d-flex justify-content-center mb-0 p-0"
      role="group"
      [attr.aria-label]="'accessories.control.mute_control' | translate"
    >
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(false, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': !targetMode, 'fa-blank': targetMode }"></i>
        </div>
        {{ 'accessories.control.not_mute' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
      <button type="button" class="btn mb-0 mx-0 p-3 btn-control" (click)="setTargetMode(true, $event)">
        <div class="float-start primary-text">
          <i class="fas fa-xl" [ngClass]="{ 'fa-check-circle': targetMode, 'fa-blank': !targetMode }"></i>
        </div>
        {{ 'accessories.control.mute' | translate }}
        <div class="float-end"><i class="fas fa-xl fa-blank"></i></div>
      </button>
    </div>
    } @if (targetVolume) {
    <h6 class="mt-4 mb-0">{{ 'accessories.control.speaker_volume' | translate }}: {{ targetVolume.value }}%</h6>
    <nouislider
      [min]="targetVolume.min"
      [max]="targetVolume.max"
      [step]="targetVolume.step"
      [(ngModel)]="targetVolume.value"
      (ngModelChange)="onVolumeStateChange()"
    />
    }
  </div>
  <div class="modal-footer"></div>
</div>
